<template>
  <div>
    <div class="bd">
      <div class="bd-main">
        <div class="ep-wrapper">
          <div class="ep-pay-step ep-step-channel bd-main-container" style="display: block;">
            <div class="ep-order-detail">
              <div>
                <div class="ep-question-guide-trigger"><a href="javascript:void(0);" data-action="issue">问题指引</a></div>
                <div class="ep-order-tit">
                  <dl>
                    <dt>商品订单：</dt>
                    <dd>GP6889142551782207488</dd>
                  </dl>
                </div>

                <div class="ep-order-tit"><span>支付金额：<em class="rmb"><i>¥</i>8,980.00</em></span>
                  <a href="javascript:void(0);" class="ep-order-view " id="iconOpenAndClose" data-action="expend">
                    <span @click="openAndClose">订单详情</span>
                    <i class="ep-icon ep-icon-arrow"></i>
                  </a>
                </div>

                <el-collapse-transition>
                  <div class="ep-order-con show" v-show="show" id="open">
                    <dl>
                      <dt>商品名称：</dt>
                      <dd>Java零基础后端开发工...[QQ]</dd>
                    </dl>
                    <dl>
                      <dt>支付订单：</dt>
                      <dd>E-220118170134942224</dd>
                    </dl>
                    <dl>
                      <dt>应付金额：</dt>
                      <dd><span class="rmb"><i>￥</i>8,980.00</span></dd>
                    </dl>
                    <dl>
                      <dt>购买时间：</dt>
                      <dd>2022年01月18日</dd>
                    </dl>
                  </div>
                </el-collapse-transition>


              </div>
            </div>
            <div class="ep-pay-method ep-pay-methods">
              <dl>
                <dt class="yxinmiracle-dl">支付方式：</dt>
                <dd class="pay-channel ">
                  <div class="ep-pay-method-list-tit">
                    <ul>
                      <li class="ep-channel-item-wechat selected" title="微信支付">
                        <span class="ep-icon ep-icon-wxpay"></span>
                        <span class="ep-pay-method-name">微信支付</span>
                        <i class="ep-icon ep-icon-selected"></i>
                      </li>
                      <li class="ep-channel-item-qqwallet" @click="qqMeg" title="QQ钱包支付">
                        <span class="ep-icon ep-icon-qqpay"></span>
                        <span class="ep-pay-method-name">QQ钱包支付</span>
                      </li>
                      <li class="ep-channel-item-bank" @click="bankMsg" title="网银支付">
                        <span class="ep-icon ep-icon-unionpay"></span>
                        <span class="ep-pay-method-name">网银支付</span>
                      </li>
                    </ul>
                  </div>
                  <div class="ep-qrcode-error-tip" style="display: none;">
                    <span class="ep_icon_warning_tip"></span>
                    <span class="ep_warning_text"></span></div>
                  <div class="ep-pay-method-list-con">
                    <div class="con channel-wechat show">
                      <div class="clearfix">
                        <div class="fl">
                          <div class="ep-wxpay-qrcode-wrap">
                            <!--二维码-->
                            <div id="logins" height="200" width="200" class="ep-wxpay-qrcode">

                            </div>
                          </div>
                          <div class="ep-wxpay-qrcode-notice">请打开手机微信，扫一扫完成支付</div>
                        </div>
                        <div class="fl ep-wxpay-qrcode-tip">
                          <img src="https://midas.gtimg.cn/enterprise/images/ep_sys_wx_tip.jpg"></div>
                      </div>
                    </div>

                  </div>
                </dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { qrcanvas } from 'qrcanvas'
  import { v4 as uuidv4 } from 'uuid'
  import { getWeiXinQrCode, checkPayStatusCode } from '@/api/userApi'
  import { showLoading, hideLoading } from '../../utils/loading'

  export default {
    name: 'Enterprise',
    data () {
      return {
        show: false,
        out_trade_no: '',
        timeWorker: ''
      }
    },
    methods: {
      openAndClose () {
        this.show = !this.show
        if (this.show === true) {
          document.getElementById('iconOpenAndClose').classList.add('ep-order-active')
        } else {
          document.getElementById('iconOpenAndClose').classList.remove('ep-order-active')
        }
      },
      qqMeg () {
        this.$message({
          message: 'QQ支付功能还不能使用噢',
          type: 'warning'
        })
      },
      bankMsg () {
        this.$message({
          message: '网银支付能还不能使用噢',
          type: 'warning'
        })
      },
      getPathParams () {
        return this.$route.query.classId
      },
      getStatus () {
        checkPayStatusCode(this.out_trade_no).then(response=>{
          console.log(response.data)
          if (response.data.trade_state === 'SUCCESS') {
            clearInterval(this.timeWorker)
            this.$notify({
              title: '成功',
              message: '你已支付成功，可以观看课程',
              type: 'success'
            });
            this.$router.replace({ path: '/success' })
          }
        })

      },
      async getClassDetailData (classId) {
        showLoading()
        const uuid = uuidv4()
        const out_trade_no = uuid.split('-')[0] + uuid.split('-')[1]
        const data = await getWeiXinQrCode(out_trade_no, 1)
        if (data.data.code_url.length > 0) {
          this.out_trade_no = data.data.out_trade_no
          const canvas = qrcanvas({
            cellSize: 5.3,
            correctLevel: 'H',
            data: data.data.code_url,
            foreground: [
              // foreground color
              { style: '#55a' },
              // outer squares of the positioner
              {
                row: 0,
                rows: 7,
                col: 0,
                cols: 7,
                style: '#c33'
              },
              {
                row: -7,
                rows: 7,
                col: 0,
                cols: 7,
                style: '#c33'
              },
              {
                row: 0,
                rows: 7,
                col: -7,
                cols: 7,
                style: '#c33'
              },
              // inner squares of the positioner
              {
                row: 2,
                rows: 3,
                col: 2,
                cols: 3,
                style: '#621'
              },
              {
                row: -5,
                rows: 3,
                col: 2,
                cols: 3,
                style: '#621'
              },
              {
                row: 2,
                rows: 3,
                col: -5,
                cols: 3,
                style: '#621'
              },
            ],
            logo: {
              text: '图云教育',
              options: {
                color: 'dodgerblue',
              },
            }
          })
          let docum = document.getElementById('logins')
          docum.appendChild(canvas)
        }
        hideLoading()
        this.timeWorker = setInterval(
          this.getStatus
          , 2000)
      }
    },
    mounted () {
      this.getPathParams(this.getClassDetailData())
    },
  }
</script>

<style scoped>
  .clearfix:after {
    content: '';
    height: 0;
    line-height: 0;
    overflow: hidden;
    visibility: hidden;
    clear: both;
    display: table
  }

  .yxinmiracle-dl {
    margin-bottom: 10px;
  }

  .bd {
    padding: 40px 0 0 0;
  }

  .bd-main {
    width: 1080px;
    margin: 0 auto;
    background: #fff;
  }

  .ep-wrapper {
    position: relative;
    margin-left: 0;
  }

  html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu {
    margin: 0;
    padding: 0;
  }

  .bd-main-container {
    padding: 50px 270px 50px 250px;
  }

  .ep-pay-step {
    display: none;
  }

  .ep-order-detail {
    padding: 10px 0 20px;
  }

  .ep-question-guide-trigger {
    position: absolute;
    top: 70px;
    right: 300px;
    font-size: 14px;
    font-weight: 600;
    color: #3879d1;
    cursor: pointer;
    z-index: 1000;
  }

  .ep-question-guide-trigger:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url(https://midas.gtimg.cn/enterprise/images/question-icon.png) 0 0 no-repeat;
  }

  a {
    color: #3584cb;
  }

  a {
    text-decoration: none;
  }

  a, button {
    cursor: pointer;
  }

  .ep-order-tit {
    position: relative;
  }

  .ep-order-tit dl {
    padding-bottom: 12px;
  }

  .ep-order-tit dt {
    float: left;
    color: #000;
    font-weight: 700;
  }

  .ep-order-tit dt, .ep-order-tit dd {
    font-size: 14px;
  }

  .ep-order-tit dd {
    color: #707070;
  }

  .ep-order-tit dt, .ep-order-tit dd {
    font-size: 14px;
  }

  .ep-order-tit {
    position: relative;
  }

  .ep-order-tit span {
    font-size: 14px;
  }

  .ep-order-tit > span {
    font-size: 15px;
    color: #000;
    font-weight: 700;
  }

  .ep-order-tit .rmb {
    margin: 0 8px 0 4px;
  }

  .ep-order-tit > span > em {
    color: #0ac265;
    font-weight: 400;
    font-size: 24px;
  }

  .rmb {
    font-size: 14px;
  }

  .ep-order-tit .rmb i {
    font-size: 18px;
  }

  .rmb i {
    font-size: 12px;
  }

  i, cite, em, var, address, dfn {
    font-style: normal;
  }

  .ep-order-view {
    position: relative;
    margin-left: 10px;
    font-size: 14px;
    padding-right: 15px;
    transition: color .1s ease-in;
  }

  .ep-order-tit span {
    font-size: 14px;
  }

  .ep-order-view span {
    color: #707070;
  }

  .ep-order-view .ep-icon-arrow {
    position: absolute;
    right: -2px;
    top: 50%;
    margin-top: -4px;
  }

  .ep-icon-arrow {
    width: 10px;
    height: 8px;
    background-position: -35px -175px;
  }

  .ep-icon {
    background-image: url(https://midas.gtimg.cn/enterprise/images/ep_new_sprites.png);
    background-repeat: no-repeat;
    display: block;
  }

  .hide {
    display: none;
  }

  .ep-order-con.show {
    display: block;
  }

  .ep-order-detail .ep-order-con {
    padding-left: 72px;
  }

  .ep-dl-list, .ep-order-con {
    font-size: 14px;
  }

  .ep-order-detail .ep-dl-list dl, .ep-order-detail .ep-order-con dl {
    margin-top: 15px;
    margin-bottom: 0;
  }

  .ep-dl-list dl, .ep-order-con dl {
    zoom: 1;
    clear: both;
    margin-bottom: 15px;
  }

  .ep-order-detail .ep-dl-list dl dt, .ep-order-detail .ep-order-con dl dt {
    color: #707070;
  }

  .ep-dl-list dl dt, .ep-order-con dl dt {
    float: left;
  }

  .ep-dl-list dl dd, .ep-order-con dl dd, .ep-dl-list dl dt, .ep-order-con dl dt {
    line-height: 1.5;
  }

  .ep-dl-list dl dd, .ep-order-con dl dd {
    padding-left: 70px;
    color: #707070;
  }

  .ep-dl-list dl dd, .ep-order-con dl dd, .ep-dl-list dl dt, .ep-order-con dl dt {
    line-height: 1.5;
  }

  .ep-dl-list dl:after, .ep-order-con dl:after {
    content: '';
    height: 0;
    line-height: 0;
    overflow: hidden;
    visibility: hidden;
    clear: both;
    display: table;
  }

  .ep-pay-method {
    padding-top: 20px;
  }

  .ep-pay-method dl {
    zoom: 1;
    clear: both;
  }

  .ep-pay-method dt {
    float: none;
  }

  .ep-pay-methods dt {
    line-height: 44px;
  }

  .ep-pay-method dt {
    color: #000;
    font-weight: 700;
    font-size: 14px;
    line-height: 25px;
  }

  .ep-pay-method dd {
    padding-left: 0;
    float: none;
  }

  .ep-pay-method-list-tit {
    margin-bottom: 25px;
  }

  .ep-pay-method-list-tit ul {
    zoom: 1;
    clear: both;
  }

  .ep-pay-method-list-tit {
    margin-bottom: 25px;
  }

  .ep-pay-method-list-tit li.selected {
    line-height: 40px;
    *height: 42px;
    *width: 128px;
    border: 2px solid #3879d1;
  }

  .ep-pay-method-list-tit li {
    transition: border-color .1s ease-in, color .1s ease-in;
  }

  .ep-pay-method-list-tit li {
    position: relative;
    font-size: 0;
    display: block;
    float: left;
    width: 130px;
    height: 44px;
    line-height: 42px;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #dedede;
    cursor: pointer;
  }

  li {
    list-style: none;
  }

  .ep-order-detail {
    border-bottom: 1px solid #f3f3f3;
  }

  .ep-pay-method-list-tit li .ep-icon {
    margin-right: 4px;
  }

  .ep-pay-method-list-tit li span {
    display: inline-block;
    color: #707070;
    font-size: 14px;
    line-height: 25px;
    vertical-align: middle;
  }

  .ep-icon-wxpay {
    width: 22px;
    height: 19px;
    background-position: 0 -50px;
  }

  .ep-pay-method-list-tit li .ep-pay-method-name {
    transition: color .1s ease-in;
  }

  .ep-pay-method-list-tit li span {
    display: inline-block;
    color: #707070;
    font-size: 14px;
    line-height: 25px;
    vertical-align: middle;
  }

  .ep-pay-method-list-tit li.selected .ep-icon-selected {
    transform-origin: 100% 100%;
    animation: iconScale .1s linear;
  }

  .ep-pay-method-list-tit li.selected .ep-icon-selected {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
  }

  .ep-pay-method-list-tit li .ep-icon {
    margin-right: 4px;
  }

  .ep-icon-selected {
    width: 20px;
    height: 20px;
    background-position: -25px 0;
  }

  .ep-pay-method-list-con .con.show {
    display: block;
  }

  .ep-pay-method-list-con .con {
    display: none;
  }

  .clearfix {
    zoom: 1;
    clear: both;
  }

  .fl {
    float: left;
  }

  .ep-wxpay-qrcode-wrap {
    width: 196px;
    height: 196px;
    margin-bottom: 10px;
  }

  img {
    max-width: 100%;
    vertical-align: middle;
  }

  .ep-wxpay-qrcode-notice {
    height: 30px;
    line-height: 30px;
    background-color: #00c800;
    font-size: 12px;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
  }

  .ep-wxpay-qrcode-tip {
    margin-left: 40px;
    margin-top: -10px;
  }


  html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu {
    margin: 0;
    padding: 0;
  }

</style>

<style type="text/css">
  .ep-icon-wxpay {
    width: 22px;
    height: 19px;
    background-position: 0 -50px
  }

  .ep-icon-selected {
    width: 20px;
    height: 20px;
    background-position: -25px 0
  }

  .ep-icon-arrow {
    width: 10px;
    height: 8px;
    background-position: -35px -175px
  }

  .ep-icon .ep-sprites2 {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: middle;
    overflow: hidden;
    text-indent: -99999px;
    *text-indent: 0;
    *font-size: 0;
    background-image: url(//midas.gtimg.cn/enterprise/images/ep_sprites2.png);
    background-repeat: no-repeat
  }

  .disabled .ep-icon-wxpay {
    background-position: -24px -50px
  }

  .disabled .ep-icon-qqpay {
    background-position: -18px -71px
  }

  .disabled .ep-icon-tenpay {
    background-position: 0 -145px
  }

  .disabled .ep-icon-unionpay {
    background-position: 0 -193px
  }

  .disabled .ep-icon-alipay {
    background-position: -17px -212px
  }

  @media (-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi) {
    .ep-icon {
      background-image: url('//midas.gtimg.cn/enterprise/images/ep_new_sprites@2x.png');
      background-repeat: no-repeat;
      background-size: 60px 250px
    }
  }

  .clearfix {
    zoom: 1;
    clear: both
  }

  .rmb {
    font-size: 14px
  }

  .rmb i {
    font-size: 12px
  }

  a {
    color: #3584cb
  }

  a:hover {
    text-decoration: underline
  }


  .ep-modal, .ep-modal-mask {
    position: fixed;
    visibility: hidden
  }


  .ep-modal-body .text.text-status span {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    line-height: 25px;
    vertical-align: middle
  }

  .ep-modal-body .text.text-status .ep-icon {
    margin-right: 8px
  }


  .ep-modal-footer .links a {
    color: #4a7cce;
    font-size: 12px;
    margin-right: 17px
  }


  .mod-bank .bank-logo-wrap input {
    position: absolute;
    opacity: 0;
    z-index: -1;
    width: 0;
    height: 0;
    overflow: hidden
  }

  .mod-bank .bank-logo-wrap a {
    padding-left: 35px;
    text-decoration: underline
  }

  .mod-bank .bank-logo-wrap a:hover {
    text-decoration: underline
  }

  .mod-bank .bank-logo-wrap.selected {
    z-index: 3;
    width: 108px;
    height: 28px;
    line-height: 28px;
    border: 2px solid #3879d1
  }

  .layer-neat-l .hide {
    display: none
  }


  .layer-neat-l label {
    margin-right: 5px;
    color: #707070;
    font-size: 14px;
    line-height: 14px
  }

  .layer-neat-l label input {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 0;
    display: none
  }

  .bank-disable-tips span {
    font-weight: 600
  }


  .ep-status span {
    float: left;
    line-height: 25px
  }

  .ep-status span.ep-icon {
    margin-right: 8px
  }


  .ep-dl-list, .ep-order-con {
    font-size: 14px
  }

  .ep-dl-list dl, .ep-order-con dl {
    zoom: 1;
    clear: both;
    margin-bottom: 15px
  }

  .ep-dl-list dl:after, .ep-order-con dl:after {
    content: '';
    height: 0;
    line-height: 0;
    overflow: hidden;
    visibility: hidden;
    clear: both;
    display: table
  }

  .ep-dl-list dl dd, .ep-order-con dl dd, .ep-dl-list dl dt, .ep-order-con dl dt {
    line-height: 1.5
  }

  .ep-dl-list dl dt, .ep-order-con dl dt {
    float: left
  }

  .ep-dl-list dl dd, .ep-order-con dl dd {
    padding-left: 70px;
    color: #707070
  }

  .ep-order-detail .ep-dl-list dl, .ep-order-detail .ep-order-con dl {
    margin-top: 15px;
    margin-bottom: 0
  }

  .ep-order-detail .ep-dl-list dl dt, .ep-order-detail .ep-order-con dl dt {
    color: #707070
  }

  .ep-links a {
    float: left;
    color: #4a7cce;
    margin-right: 22px
  }

  .ep-pay-step {
    display: none
  }

  .ep-order-con p {
    padding-top: 20px;
    color: #707070;
    font-size: 14px
  }

  .ep-order-con.show {
    display: block
  }

  .ep-pay-method {
    padding-top: 20px
  }

  .ep-pay-method dl {
    zoom: 1;
    clear: both
  }

  .ep-pay-method dl:after {
    content: '';
    height: 0;
    line-height: 0;
    overflow: hidden;
    visibility: hidden;
    clear: both;
    display: table
  }

  .ep-pay-method dt {
    color: #000;
    font-weight: 700;
    font-size: 14px;
    line-height: 25px
  }

  .ep-pay-methods dt {
    line-height: 44px
  }

  .ep-pay-wxpay-tit span {
    float: left
  }

  .ep-pay-wxpay-tit span.ep-icon {
    margin-right: 4px
  }

  .ep-wxpay-qrcode-wrap {
    width: 196px;
    height: 196px;
    margin-bottom: 10px
  }

  .ep-wxpay-qrcode-notice {
    height: 30px;
    line-height: 30px;
    background-color: #00c800;
    font-size: 12px;
    color: #fff;
    text-align: center;
    margin-bottom: 20px
  }

  .ep-wxpay-qrcode-tip {
    margin-left: 40px;
    margin-top: -10px
  }

  .ep-other-pay-notice a {
    color: #4a7cce
  }

  .ep-other-pay-notice span {
    color: #888
  }

  .ep-order-detail {
    border-bottom: 1px solid #f3f3f3
  }

  .ep-order-tit > span {
    font-size: 15px;
    color: #000;
    font-weight: 700
  }

  .ep-order-tit > span > em {
    color: #0ac265;
    font-weight: 400;
    font-size: 24px
  }

  .ep-order-view {
    position: relative;
    margin-left: 10px;
    font-size: 14px;
    padding-right: 15px;
    transition: color .1s ease-in
  }

  .ep-order-view span {
    color: #707070
  }

  .ep-order-view .ep-icon-arrow {
    position: absolute;
    right: -2px;
    top: 50%;
    margin-top: -4px
  }

  .ep-order-view:hover {
    text-decoration: none
  }

  .ep-order-view:hover span {
    color: #4a7cce
  }

  .ep-order-view:hover .ep-icon-arrow {
    background-position: -47px -175px
  }

  .ep-order-view:active {
    color: #4a7cce
  }

  .ep-order-active:hover .ep-icon-arrow {
    background-position: -47px -185px
  }

  .ep-order-active .ep-icon-arrow {
    background-position: -35px -185px
  }

  .ep-qrcode-notice em, .ep-qrcode-notice-outmoded {
    color: #f34d4d
  }

  .ep-qrcode-notice-outmoded a, .ep-qrcode-notice a {
    color: #4a7cce
  }

  .ep-pay-method-list-tit ul {
    zoom: 1;
    clear: both
  }

  .ep-pay-method-list-tit ul:after {
    content: '';
    height: 0;
    line-height: 0;
    overflow: hidden;
    visibility: hidden;
    clear: both;
    display: table
  }

  .ep-pay-method-list-tit li {
    position: relative;
    font-size: 0;
    display: block;
    float: left;
    width: 130px;
    height: 44px;
    line-height: 42px;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #dedede;
    cursor: pointer
  }

  .ep-pay-method-list-tit li + li {
    margin-left: 10px;
    margin-bottom: 8px
  }

  .ep-pay-method-list-tit li .ep-pay-method-name {
    transition: color .1s ease-in
  }

  .ep-pay-method-list-tit li .ep-transfer-confirm-tips, .ep-pay-method-list-tit li .ep-confirm-tips-content {
    visibility: hidden;
    border-color: #1379d8;
    right: 217px;
    top: -56px
  }

  .ep-pay-method-list-tit li .ep-transfer-confirm-tips::after, .ep-pay-method-list-tit li .ep-confirm-tips-content::after {
    background-image: none
  }

  .ep-pay-method-list-tit li .ep-transfer-confirm-tips.ep-iframe, .ep-pay-method-list-tit li .ep-confirm-tips-content.ep-iframe {
    right: 183px
  }

  .ep-pay-method-list-tit li:hover, .ep-pay-method-list-tit li.hover {
    border-color: #3879d1
  }

  .ep-pay-method-list-tit li:hover .ep-pay-method-name, .ep-pay-method-list-tit li.hover .ep-pay-method-name {
    color: #3879d1
  }

  .ep-pay-method-list-tit li:hover .ep-transfer-confirm-tips, .ep-pay-method-list-tit li.hover .ep-transfer-confirm-tips, .ep-pay-method-list-tit li:hover .ep-confirm-tips-content, .ep-pay-method-list-tit li.hover .ep-confirm-tips-content {
    visibility: visible
  }

  .ep-pay-method-list-tit li.selected {
    line-height: 40px;
    *height: 42px;
    *width: 128px;
    border: 2px solid #3879d1
  }

  .ep-pay-method-list-tit li.selected .ep-icon-selected {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0
  }

  .ep-pay-method-list-tit li.disabled {
    background-color: #f9f9f9;
    border-color: #dedede;
    color: #bcbcbc
  }

  .ep-pay-method-list-tit li.disabled .ep-pay-method-name {
    color: #bcbcbc
  }

  .ep-pay-method-list-tit li.disabled:hover, .ep-pay-method-list-tit li.disabled:active {
    line-height: 42px;
    border: 1px solid #dedede
  }

  .ep-pay-method-list-tit li.disabled:hover .ep-pay-method-name, .ep-pay-method-list-tit li.disabled:active .ep-pay-method-name {
    color: #bcbcbc
  }

  .ep-pay-method-list-tit li span {
    display: inline-block;
    color: #707070;
    font-size: 14px;
    line-height: 25px;
    vertical-align: middle
  }

  .ep-pay-method-list-tit li .ep-icon {
    margin-right: 4px
  }

  .ep-pay-method-list-tit li .ep-if-unionpay-tip {
    position: absolute;
    margin-top: -53px;
    margin-left: 70px;
    float: none;
    display: block;
    width: 120px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background-color: #ffc539;
    color: #fff;
    border-radius: 2px
  }

  .ep-pay-method-list-con .con {
    display: none
  }

  .ep-pay-method-list-con .con.show {
    display: block
  }

  .ep-pay-method-list-con .ep-tenpay-con div {
    text-align: right
  }

  .ep-pay-method-list-con .ep-tenpay-con .text {
    margin-top: 15px;
    color: #d7d7d7
  }

  .ep-qrcode-loading {
    width: 194px;
    height: 194px;
    margin-bottom: 10px;
    border: 1px solid #f1f1f3;
    text-align: center
  }

  .ep-qrcode-loading img {
    margin-top: 57px
  }

  .ep-qrcode-error-tip {
    text-align: center;
    display: none;
    font-size: 0;
    padding: 10px 0;
    background-color: #fffdee;
    border: 1px solid #ffeec3;
    margin-bottom: 20px;
    width: 408px
  }

  .ep-qrcode-error-tip span {
    display: inline-block;
    height: 23px;
    line-height: 23px;
    vertical-align: middle
  }

  .ep-question-guide-body iframe {
    height: 580px;
    width: 100%
  }


  .ep-question-guide-trigger {
    position: absolute;
    top: 70px;
    right: 300px;
    font-size: 14px;
    font-weight: 600;
    color: #3879d1;
    cursor: pointer;
    z-index: 1000
  }

  .ep-question-guide-trigger a:hover {
    text-decoration: none
  }

  .ep-question-guide-trigger:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url(//midas.gtimg.cn/enterprise/images/question-icon.png) 0 0 no-repeat
  }

  @keyframes iconScale {
    0% {
      transform: scale(0)
    }
    100% {
      transform: scale(1)
    }
  }

  @keyframes loaderIconRotate {
    0% {
      transform: rotate(0)
    }
    100% {
      transform: rotate(-360deg)
    }
  }

  .ep-confirm-tips-content strong {
    font-size: 14px;
    color: #fa8333
  }

  .ep-logo a {
    display: block
  }

  .ep-logo img {
    height: 32px
  }


  .ep-order-status h1 {
    font-size: 16px;
    font-weight: 700
  }

  .user-info p {
    font-size: 14px
  }

  .copyright p {
    text-align: center;
    padding: 6px 0
  }

  html, body, .container {
    height: 100%
  }

  .bd {
    padding: 40px 0 200px
  }

  .bd-main {
    width: 1080px;
    margin: 0 auto;
    background: #fff
  }

  .bd-main-container {
    padding: 50px 270px 50px 250px
  }

  .ep-wrapper {
    position: relative;
    margin-left: 0
  }

  .ep-question p {
    padding: 10px 0
  }

  .ep-order-detail {
    padding: 10px 0 20px
  }

  .ep-order-detail .ep-order-con {
    padding-left: 72px
  }

  .ep-order-tit {
    position: relative
  }

  .ep-order-tit .rmb {
    margin: 0 8px 0 4px
  }

  .ep-order-tit .rmb i {
    font-size: 18px
  }

  .ep-order-tit span {
    font-size: 14px
  }

  .ep-order-tit dl {
    padding-bottom: 12px
  }

  .ep-order-tit dt, .ep-order-tit dd {
    font-size: 14px
  }

  .ep-order-tit dt {
    float: left;
    color: #000;
    font-weight: 700
  }

  .ep-order-tit dd {
    color: #707070
  }

  .fail .ep-order-con p:first-child {
    padding-top: 0
  }

  .ep-pay-method dt {
    float: none
  }

  .ep-pay-method dd {
    padding-left: 0;
    float: none
  }

  .ep-pay-success-tips a {
    padding-right: 4px;
    color: #3879d1
  }

  .ep-qrcode-notice em {
    font-weight: 700
  }

  .hide {
    display: none
  }


  .ep-pay-method-list-tit {
    margin-bottom: 25px
  }

  .ep-pay-method-list-tit li {
    transition: border-color .1s ease-in, color .1s ease-in
  }

  .ep-pay-method-list-tit li.selected .ep-icon-selected {
    transform-origin: 100% 100%;
    animation: iconScale .1s linear
  }
</style>

